<template>

	<div class="aftrer-sale-list-page" style="width:100%;  " ref="scrollOuter">

		<div style=" width: 100%">
			<!--订单列表-->
			<div>
				<order-list-item v-if="item.length>0" :orderListInfor="item" v-for="(item, index) in orderInfo" :key="index">
				</order-list-item>
			</div>
			<!--订单列表 end-->

			<div v-if="isOnLoad && totalPageCount > pageNum " style="color:#9a9a9a ;height:2rem!important;  width: 100%;text-align: center;  line-height: 2rem;vertical-align: middle ; background:rgb(207,207,207) ;font-weight: 600;margin-top: -1rem" @click.self="changeFloat">
				<span style="position: relative">
          <LoadMoreAnimate backgroundColor="rgb(207,207,207)"
                           style="position: absolute;left:0;transform: translateX(-100%)">
          </LoadMoreAnimate>加载更多</span>
			</div>

			<div v-if="orderInfo.length <= 0" class="centent" style="">
				<div class="no_data">
					<img src="static/image/no_order.png" style="width:70%;">
					<p>暂无相关数据</p>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import OrderListItem from "@/real-components/AfterSaleList"
	import TranslateGroup from "@/real-components/TranslateMain"
	import { getOrder, querySubmitedInfor, selectAfterSalesPageList } from "@/utils/ReturnAxios"
	import LoadMoreAnimate from '@/real-components/LoadMoreAnimate';
	import PageFoot from "@/real-components/PageFoot"
	import axios from "axios"
	import { showLoading, hideLoading } from "@/utils/loading";
	import { translateDetailData } from "@/utils/TranslateDetailDate"

	export default {
		data() {
			return {
				pageSize: 10,
				pageNum: 1,
				totalPageCount: 1,
				isOnLoad: false,
				isOnloadingMore: false,
				elements: null,
				orderInfo: []
			}
		},
		components: {
			OrderListItem, //优惠商品展示组件
			TranslateGroup, //左右滑动组件
			PageFoot,
			LoadMoreAnimate
		},
		props: {
			//传递分类名称的参数
			lengths: {
				type: Number,
				default: 2,
			},
			discountList: {
				type: Array,
				default: () => {
					return [{
							isReceived: false,
							allPrice: parseInt(100),
							offPrice: parseInt(6)
						},
						{
							isReceived: false,
							allPrice: parseInt(100),
							offPrice: parseInt(5)
						}
					]
				}
			},
			scrollY: {
				type: Number,
				default: 0,
			}
		},

    watch: {
      orderInfo() {
        this.$nextTick(() => {
          this.$emit('refresh')
        })
      }

    },
		methods: {
			savePagePosition() {
				var option = {
					pageNum: this.pageNum,
					pagePosition: this.scrollY,
					index: 0
				}
				return option
			},
			loadMore() {
				if(this.isOnloadingMore || this.totalPageCount <= this.pageNum) {
					return
				}
				this.pageNum++
					this.queryDisSubmitInfo(this.pageNum)
			},

			//申请可售后的订单信息并保存
			async queryDisSubmitInfo(pageNum, isFirst) {
				this.isOnloadingMore = true
				var pageSize = this.pageSize
				if(isFirst) {
					pageSize = pageNum * this.pageSize
					var res = await getOrder(`pageNum=${1}&length=${pageSize}`, this.sessionId)
				} else {
					var res = await getOrder(`pageNum=${pageNum}&length=${pageSize}`, this.sessionId)
				}
				this.$emit('clearLoading')
				this.isOnloadingMore = false
				res = res.data
				if(res.returncode == 0) {
					Toast({
						message: res.errmsg,
						iconClass: "aui-iconfont aui-icon-close"
					})
					return
				}
				res = res.data[0]
				this.totalPageCount = isFirst ? res.totalPageCount * pageNum : res.totalPageCount
				var data = res.results.sort((a, b) => {
					return b.createTm - a.createTm
				})
				this.orderInfo.push(...data)
				this.isOnLoad = true
				data.length < 5 && this.loadMore()
			}
		},
		watch: {},
		computed: {

			//从vuex获取当前的页面index
			activeIndex() {
				return this.$store.state.cjy.classifyIndex
			},
			showOrder() {
				return this.orderInfo
			},
			sessionId() {
				return this.$store.state.wxh.sessionId || localStorage.getItem('sessionId')
			}
		},
		mounted() {
			this.elements = this.$refs.scrollOuter
			this.$refs.scrollOuter.addEventListener("scroll", () => {})
		},
		async created() {

			var afterSaleListOption = await localforage.getItem('afterSaleList')
			if(afterSaleListOption) {
				afterSaleListOption = afterSaleListOption.find(item => {
					return item.index == 0
				})
				this.pageNum = afterSaleListOption.pageNum
				this.queryDisSubmitInfo(this.pageNum, true)
			} else {
				this.queryDisSubmitInfo(this.pageNum)
			}
		}
	}
</script>

<style>
	.goleft-enter-active,
	.goleft-leave-active,
	.goright-enter-active,
	.goright-leave-active {
		transition: all 0.5s;
	}

	.goleft-enter,
	.goright-leave-to {
		transform: translatex(100%);
		opacity: 0.8
	}

	.goleft-leave-to,
	.goright-enter {
		transform: translatex(-100%);
		opacity: 0.8
	}

	.coupon_collection {
		width: auto;
		height: 3.8rem;
	}
</style>
